<template>
  <div class="service-div">
    <van-nav-bar title="服务详情" left-text="返回" left-arrow @click-left="$router.back()" />
    <van-skeleton title :row="10" :loading="isLoading" />

    <div class="service-main" v-show="!isLoading">
      <div class="service-top">
        <div class="service-top-title">
          <div class="service-title">
            <span>{{ serviceInfo.name }}</span>
          </div>
          <div class="service-price">
            <span>￥{{ serviceInfo.totalFee }}/次起</span>
          </div>
        </div>
        <div class="service-content">
          <span>{{ serviceInfo.content }}</span>
        </div>
        <van-divider />
        <div class="service-top-price">
          <div class="service-top-price-title">
            <span>费用明细</span>
          </div>
          <div class="service-home-price">
            <div class="service-home-title">
              <span>上门服务费</span>
            </div>
            <div class="service-home-price-font">
              <span>￥{{ serviceInfo.homeServiceFee }}/次起</span>
            </div>
          </div>
          <div class="service-home-price">
            <div class="service-home-title">
              <span>操作费</span>
            </div>
            <div class="service-home-price-font">
              <span>￥{{ serviceInfo.operatingFee }}/次起</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="service-introduce" v-show="!isLoading">
      <div class="service-introduce-content">
        {{ serviceInfo.introduce }}
      </div>
    </div>
    <div class="service-button">
      <van-button type="info" round @click="reservation">立即预约</van-button>
    </div>
    <ServiceOrder :showOrder="showOrder" @cancelOrder="handleMessage" :serviceInfo="serviceInfo"></ServiceOrder>
  </div>
</template>

<script>
import ServiceOrder from "../ServiceOrder"
export default {
  name: "ServiceItem",
  components: {
    ServiceOrder
  },
  data() {
    return {
      serviceInfo: {},
      // 是否加载
      isLoading: true,
      // 是否展示订单页面
      showOrder: false,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.isLoading = true
      let res = await this.$store.dispatch("getServiceInfo", {
        serviceId: this.$route.params.id
      })
      this.isLoading = false
      if (res.success) this.serviceInfo = res.data
      else this.$toast.fail(res.message);
    },
    // 接收子组件传来信息
    handleMessage(data) {
      this.showOrder = data
    },
    // 预约
    reservation(){
      this.showOrder = true
    }

  },

}
</script>

<style scoped>
.service-div {
  height: 100%;
  background: rgb(234, 237, 237);
}

.service-main {
  background-color: white;
  width: 90%;
  margin: 0 auto;
  border-radius: 5px;
  margin-top: 50px;
}

.service-top {
  padding: 30px 5% 20px 5%;
}

.service-top-title {
  display: flex;
  justify-content: space-between;
  height: 45px;
}

.service-title {
  font-size: 1.2rem;
  font-weight: 550;
}

.service-price {
  line-height: 45px;
  font-size: 0.9rem;
  color: rgb(185, 125, 14);
}

.service-content {
  font-size: 0.8rem;
  color: gray;
}

.service-top-price-title {
  font-size: 1rem;
  font-weight: 550;
}

.service-home-price {
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.service-home-title {
  font-size: 0.8rem;
  line-height: 30px;
  color: gray;
}

.service-home-price-font {
  font-size: 0.9rem;
  line-height: 30px;
  color: rgb(185, 125, 14);
}

.service-introduce {
  width: 95%;
  border-radius: 5px;
  margin: 0 auto;
  background-color: white;
  font-size: 0.8rem;
  color: gray;
  margin-top: 10px;
}

.service-introduce-content {
  padding: 15px 5% 15px 5%;
}

.service-button {
  position: fixed;
  bottom: 0;
  background-color: white;
  width: 100%;
  text-align: center;
  padding: 8px 0 8px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.service-button button {
  width: 80%;
}
</style>